<template>
  <div class="headButtonStack">
    <el-button class="headButton" color="#1E3AAF" plain v-if="this.$store.state.isLogin" @click="logout">
      <el-icon class="fa fa-power-off" style="vertical-align: middle;"/>
      <span style="vertical-align: middle;">退出</span>
    </el-button>
    <el-button-group class="headButton" v-else>
      <el-button color="#1E3AAF" plain @click="login">
        <el-icon class="fa fa-user-o" style="vertical-align: middle;"/>
        <span style="vertical-align: middle;">登录</span>
      </el-button>
      <el-button color="#1EAF3A" plain @click="signup">
        <span style="vertical-align: middle;">注册</span>
      </el-button>
    </el-button-group>
    <el-button class="headButton" color="#F87400" @click="download" plain>
      <el-icon class="fa fa-cloud-download" style="vertical-align: middle;"/>
      <span style="vertical-align: middle;">采集端下载</span>
    </el-button>
  </div>
  <el-menu class="el-menu-demo" mode="horizontal" router>
    <div class="logo_alpha"/>
    <div class="title">图荟 / Easy Image</div>
    <el-menu-item v-for="(item,i) in navList" v-show="item.nonLoginShow||this.$store.state.isLogin" :key="i" :index="item.name">{{item.navItem}}</el-menu-item>
  </el-menu>
</template>

<script>
import {ElMessage} from "element-plus";

export default {
  name: "MainMenu",
  data() {
    return {
      navList:[ // TODO MENU链接
        {name:'/PrivateDataset',navItem:'我的数据集',nonLoginShow:false},
        {name:'/PublicDataset',navItem:'公开数据集',nonLoginShow:true},
        //{name:'/',navItem:'账户管理',nonLoginShow:false},
        {name:'/PrivacyStatement',navItem:'隐私协议',nonLoginShow:true}
      ]
    }
  },
  methods: {
    /**
     * @description: 点击“下载”按钮，下载 apk 文件
     * @return void
     */
    download() {
      let url = "http://116.62.23.69/apk/EasyImage.apk";
      window.open(url)
    },

    /**
     * @description: 点击“注销”按钮，退出登录
     * @return void
     */
    logout() {
      // 清空 Session 会话的存储
      sessionStorage.clear();
      let that = this;
      that.$store.commit("logout")
      let router_target = "MainPage";
      that.$router.push({
        name: router_target
      })
      ElMessage.success({
        showClose: true,
        message: "退出登录",
        type: "success",
        center: true
      })
    },

    /**
     * @description: 点击“登录”按钮
     * @return void
     */
    login() {
      let that = this
      let router_target = "UserLogin"
      that.$router.push({
        name: router_target
      })
    },

    signup() {
      let that = this
      let router_target = "UserSignup"
      that.$router.push({
        name: router_target
      })
    }
  }
}
</script>

<style scoped>

.logo_alpha {
  background: url('../assets/logo_alpha.png') no-repeat center;
  margin-left: 20px;
  padding: 5px;
  width: 45px;
  height: 45px;
  min-width: 45px;
  min-height: 45px;
  background-size: contain;
}
.title {
  color: #1e3aaf;
  font-size: large;
  padding: 14px;
  min-width: 175px;
}
.headButtonStack {
  position: absolute;
  z-index: 1;
  width: 100%;
  min-width: 1300px;
  pointer-events: none;
}
.headButton {
  margin: 10px;
  float: right;
  pointer-events: auto
}
</style>